<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '财务',
  },
}
</route>
<template>
  <view class="finance-page">
    <!-- 自定义导航栏 -->
    <view
      class="custom-nav-bar bg-white p-4 border-b border-gray-200 flex justify-between items-center"
      :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
    >
      <text class="text-xl font-semibold">财务记录</text>
      <view class="flex space-x-4">
        <view class="text-gray-500" @click="navigateToCategories">
          <text class="i-fa-solid:tag"></text>
        </view>
        <view class="text-gray-500" @click="navigateToStats">
          <text class="i-fa-solid:chart-bar"></text>
        </view>
      </view>
    </view>

    <!-- 顶部总览 -->
    <view class="bg-white p-4 shadow-sm">
      <view class="flex justify-between items-center mb-4">
        <view>
          <text class="text-sm text-gray-500">本月支出</text>
          <view class="flex items-end">
            <text class="text-2xl font-semibold text-red-500">¥3,250.00</text>
          </view>
        </view>
        <view>
          <text class="text-sm text-gray-500">本月收入</text>
          <view class="flex items-end">
            <text class="text-2xl font-semibold text-green-500">¥5,800.00</text>
          </view>
        </view>
        <view>
          <text class="text-sm text-gray-500">结余</text>
          <view class="flex items-end">
            <text class="text-2xl font-semibold text-blue-500">¥2,550.00</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 每日记录列表 -->
    <scroll-view scroll-y class="finance-list-container">
      <!-- 今天 -->
      <view class="p-4">
        <view class="flex justify-between items-center mb-2">
          <text class="text-lg font-semibold text-gray-700">今天</text>
          <text class="text-sm text-gray-500">{{ todayDateString }}</text>
        </view>

        <view class="bg-white rounded-lg overflow-hidden shadow-sm mb-6">
          <view
            v-for="(record, index) in todayRecords"
            :key="index"
            class="finance-item"
            @click="navigateToDetail(record.id)"
          >
            <view
              class="finance-icon"
              :style="{ backgroundColor: getCategoryBgColor(record.category) }"
            >
              <text :class="['text-white', getCategoryIcon(record.category)]"></text>
            </view>
            <view class="flex-1">
              <view class="flex items-center justify-between mb-1">
                <text class="font-medium">{{ record.title }}</text>
                <text :class="record.type === 'expense' ? 'text-red-500' : 'text-green-500'">
                  {{ record.type === 'expense' ? '-' : '+' }}¥{{ record.amount.toFixed(2) }}
                </text>
              </view>
              <view class="flex items-center justify-between">
                <text class="text-sm text-gray-500">{{ record.category }}</text>
                <text class="text-sm text-gray-500">{{ record.time }}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 昨天 -->
        <view class="flex justify-between items-center mb-2">
          <text class="text-lg font-semibold text-gray-700">昨天</text>
          <text class="text-sm text-gray-500">{{ yesterdayDateString }}</text>
        </view>

        <view class="bg-white rounded-lg overflow-hidden shadow-sm">
          <view
            v-for="(record, index) in yesterdayRecords"
            :key="index"
            class="finance-item"
            @click="navigateToDetail(record.id)"
          >
            <view
              class="finance-icon"
              :style="{ backgroundColor: getCategoryBgColor(record.category) }"
            >
              <text :class="['text-white', getCategoryIcon(record.category)]"></text>
            </view>
            <view class="flex-1">
              <view class="flex items-center justify-between mb-1">
                <text class="font-medium">{{ record.title }}</text>
                <text :class="record.type === 'expense' ? 'text-red-500' : 'text-green-500'">
                  {{ record.type === 'expense' ? '-' : '+' }}¥{{ record.amount.toFixed(2) }}
                </text>
              </view>
              <view class="flex items-center justify-between">
                <text class="text-sm text-gray-500">{{ record.category }}</text>
                <text class="text-sm text-gray-500">{{ record.time }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加记录按钮 -->
    <view class="add-button" @click="navigateToEdit">
      <text class="i-fa-solid:plus text-xl text-white"></text>
    </view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'FinancePage',
})

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

// 日期格式化
const todayDateString = ref('')
const yesterdayDateString = ref('')

// 模拟财务数据
const todayRecords = ref([
  {
    id: '1',
    title: '午餐',
    category: '餐饮',
    type: 'expense',
    amount: 35.5,
    time: '12:30',
  },
  {
    id: '2',
    title: '打车',
    category: '交通',
    type: 'expense',
    amount: 24.5,
    time: '18:45',
  },
])

const yesterdayRecords = ref([
  {
    id: '3',
    title: '工资',
    category: '收入',
    type: 'income',
    amount: 5800.0,
    time: '09:30',
  },
  {
    id: '4',
    title: '超市购物',
    category: '购物',
    type: 'expense',
    amount: 132.8,
    time: '16:20',
  },
])

// 获取分类的背景色
const getCategoryBgColor = (category: string) => {
  switch (category) {
    case '餐饮':
      return '#ff9500'
    case '交通':
      return '#5856d6'
    case '购物':
      return '#4cd964'
    case '收入':
      return '#34c759'
    default:
      return '#8e8e93'
  }
}

// 获取分类的图标
const getCategoryIcon = (category: string) => {
  switch (category) {
    case '餐饮':
      return 'i-fa-solid:utensils'
    case '交通':
      return 'i-fa-solid:car'
    case '购物':
      return 'i-fa-solid:shopping-bag'
    case '收入':
      return 'i-fa-solid:money-bill-wave'
    default:
      return 'i-fa-solid:question'
  }
}

// 导航到记录详情
const navigateToDetail = (recordId: string) => {
  uni.navigateTo({
    url: `/pages/finance/detail?id=${recordId}`,
  })
}

// 导航到编辑页面
const navigateToEdit = () => {
  uni.navigateTo({
    url: '/pages/finance/edit',
  })
}

// 导航到分类管理页面
const navigateToCategories = () => {
  uni.navigateTo({
    url: '/pages/finance/categories',
  })
}

// 导航到统计页面
const navigateToStats = () => {
  uni.navigateTo({
    url: '/pages/finance/stats',
  })
}

// 页面加载时
onLoad(() => {
  // 格式化当前日期
  const today = new Date()
  const yesterday = new Date()
  yesterday.setDate(today.getDate() - 1)

  todayDateString.value = formatDate(today)
  yesterdayDateString.value = formatDate(yesterday)
})

// 简单的日期格式化函数
const formatDate = (date: Date) => {
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
}
</script>

<style lang="scss">
.finance-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f2f2f7;
}

.finance-list-container {
  flex: 1;
  width: 100%;
}

.finance-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: white;
  border-bottom: 1px solid #e5e5e5;
}

.finance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 16px;
  border-radius: 20px;
}

.add-button {
  position: fixed;
  right: 20px;
  bottom: 100px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: white;
  background-color: #007aff;
  border-radius: 28px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
</style>
